<template>
	<view class="container">
		<image src="/static/login/loginbg.png" class="bg"></image>
		<view class="title-area">
			<view class="arrow" @click="toBack">
			</view>
			<view class="title-text">
				洗车
			</view>
		</view>
		<view class="shop-detail-area">
			<view class="shop-image-area">
				<image src="/static/index/indexbg.png" mode="" class="shop-image"></image>
			</view>
			<view class="shop-title">
				车百世汽车生活馆
			</view>
			<view class="shop-score">
				<view class="star-area">
					<view v-for="num in 4" key="num" style="padding-right: 5rpx;">
						<image src="/static/wash-car/star.png" mode="" class="star"></image>
					</view>
				</view>
				<view class="score" style="margin-right: 20rpx;">
					4分
				</view>
				<view class="sale">
					销量: 556
				</view>
			</view>
			<view class="shop-businesshours">
				<view class="week">
					营业时间：周一到周五 早上8:00-晚上22:00
				</view>
				<view class="address-area">
					<view class="address">
						位置：北京市海淀区中关村南大街
					</view>
					<view>
						<image src="/static/wash-car/plane.png" mode="" class="address-image"></image>
					</view>
				</view>

			</view>
		</view>
		<view class="service-item-area">
			<view class="service-item-title">
				服务项目
			</view>
			<view>
				<uni-forms :modelValue="formData">
					<uni-forms-item name="hobby" class="service-item-select">
						<uni-data-checkbox v-model="formData.selectedHobbys" :localdata="hobbyOptions" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="price-detail-area">
				<view class="price">
					<text style="color: red; font-size: 30rpx;">
						¥35.9
					</text>
					<text style="color: #a9a9a9; text-decoration: line-through; font-size: 20rpx;">
						¥60
					</text>
				</view>
				<view style="font-size: 20rpx; line-height: 40rpx; padding: 10rpx;">
					这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍
				</view>
			</view>

		</view>
		<view class="service-evaluation-area">
			<view class="shop-title">
				服务评价
			</view>
			<view class="service-evaluation-item" v-for="num in 3" key="num">
				<view class="user-image-area">
					<image src="/static/uni.png" mode="" class="user-image"></image>
				</view>
				<view class="evaluation-area">
					<view class="evaluation-top">
						<view class="username">
							黄**
						</view>
						<view class="date">
							2022-12-31
						</view>
					</view>
					<view class="star-area">
						<view v-for="num in 4" key="num" style="padding-right: 5rpx;">
							<image src="/static/wash-car/star.png" mode="" class="star"></image>
						</view>
					</view>
					<view class="evaluation-bottom">
						洗的很干净,几个小伙子很用心,态度也很好,强烈推荐这家店!!!
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="contact-area">
		<view class="contact-left" @click="open">
			<view>
				<image src="/static/kefu.png" mode="" class="contact-image"></image>
			</view>
			<view class="contact-text">
				联系客服
			</view>
		</view>
		<view class="contact-button">
			<button class="order-now" @click="toConfirmOrder">立即下单</button>
		</view>
	</view>
	<uni-popup ref="popupRef" type="dialog" @maskClick="close">
		<view class="custom-popup">
			<view class="popup-option">18642589456</view>
			<view class="popup-option" @click="handleCopy">复制</view>
			<view class="popup-option" @click="close">取消拨号</view>
		</view>
	</uni-popup>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	const toBack = () => {
		uni.navigateBack()
	}
	const formData = ref({
		selectedHobbys: []
	})
	const hobbyOptions = ref([{
		text: '普通洗车',
		value: 0
	}, {
		text: '精洗',
		value: 1
	}, {
		text: '内饰清洗',
		value: 2
	}, {
		text: '其它清洗',
		value: 3
	}])
	const popupRef = ref(null);
	
	// 定义打开弹窗的方法
	const open = () => {
		popupRef.value.open('bottom')
	}

	const close = () => {
		popupRef.value.close()
	}

	const toConfirmOrder = () =>{
		uni.navigateTo({
			url:"/pages/wash-car/confirm-order/confirm-order"
		})
	}
</script>

<style scoped>
	.container {
		background-color: #eee;
		position: relative;
		z-index: 1;
		padding: 20rpx;
		height: 100dvh;
	}

	.bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 400rpx;
	}

	.title-area {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx 40rpx 20rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.arrow {
		width: 14rpx;
		height: 14rpx;
		border-left-style: solid;
		border-left-width: 2rpx;
		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		transform: rotate(45deg);
	}

	.title-text {
		flex-grow: 1;
		display: flex;
		justify-content: center;
	}

	.shop-detail-area {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

	}

	.shop-image-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.shop-image {
		width: 650rpx;
		height: 400rpx;
		border-radius: 30rpx;
	}

	.shop-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.shop-score {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.star-area {
		display: flex;
		margin-right: 10rpx;

	}

	.star {
		width: 20rpx;
		height: 20rpx;
	}

	.shop-businesshours {
		font-size: 24rpx;
	}

	.week {
		padding: 5rpx 0;
	}

	.address-area {
		display: flex;
		align-items: center;
	}

	.address {
		padding: 5rpx 0;
		margin-right: 20rpx;
	}

	.address-image {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
	}

	.service-item-area {
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 30rpx;
		padding: 20rpx;
	}

	.service-item-title {
		font-size: 30rpx;
		font-weight: bold;
		padding: 10rpx 10rpx 20rpx 10rpx;
	}

	.service-item-select {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	:deep .checklist-group .checklist-box .checklist-content .checklist-text[data-v-2f788efd] {
		font-size: 20rpx;
		color: #444;
		line-height: 24rpx;
		margin: 0;
	}

	.service-evaluation-area {
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 200rpx;
	}

	.service-evaluation-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx #eee solid
	}

	.user-image {
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
	}

	.evaluation-area {
		padding: 20rpx;
	}

	.evaluation-top {
		display: flex;
		justify-content: space-between;
	}

	.username {
		font-size: 26rpx;
	}

	.date {
		font-size: 14rpx;
		color: #a9a9a9;
	}

	.evaluation-bottom {
		font-size: 24rpx;
		padding: 10rpx 0;
	}

	.service-evaluation-item:last-child {
		border-bottom: none;
	}

	.contact-area {
		background-color: #FFFFFF;
		min-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		box-sizing: border-box;
		width: 100%;
	}

	.contact-left {
		display: flex;
	}

	.contact-text {
		font-size: 24rpx;
		margin-left: 20rpx;
		line-height: 50rpx;
	}

	.contact-image {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.order-now {
		border-radius: 30rpx;
		min-height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		background-color: blue;
		color: #FFFFFF;
	}
	.custom-popup{
		background-color: #FFFFFF;
	}
	
	.popup-option{
		min-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx #eee solid;
	}
</style>